<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>php学习笔记[050]</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="show"><span>050 ajax检测用户名和邮件(三)</span></div>
<?php include 'include/top.php';?>
<div class="text">
<b>HTML的几种触发</b>
<strong>onblur</strong> 事件会在对象失去焦点时发生。<br />
<strong>onchange</strong> 事件会在域的内容改变时发生。<br />
<strong>onclick</strong> 事件会在对象被点击时发生。<br />
<strong>onfocus</strong> 事件在对象获得焦点时发生。<br />
<strong>onkeydown</strong> 事件会在用户按下一个键盘按键时发生。<br />
<strong>onkeypress</strong> 事件会在键盘按键被按下并释放一个键时发生。<br />
<strong>onkeyup</strong> 事件会在键盘按键被松开时发生。<br />
<strong>onmousedown</strong> 事件会在鼠标按键被按下时发生。<br />
<strong>onmousemove</strong> 事件会在鼠标指针移动时发生。<br />
<strong>onmouseout</strong> 事件会在鼠标指针移出指定的对象时发生。<br />
<strong>onmouseup</strong> 事件会在鼠标按键被松开时发生。<br />
<b>document.myform.user.value</b>
这个动作用于获得<strong>myform</strong>表单中的<strong>user</strong>项目中的<strong>value</strong>值<br />
我们用他来获取用户输入的信息。
</div>
<div class="text">
<b>实例</b>
我们建立一个s050_1.js文件，在里面写入下面的代码
<div class="code">// JavaScript Document<br />
  var xmlHttp;	//定义xmlHttp这个变量<br />
  function s_xmlhttprequest()	//建立实例化函数<br />
{<br />
if(window.ActiveXObject)	//判断是否支持微软的控件<br />
{<br />
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');	//实例化 <br />
}<br />
else if(window.XMLHttpRequest)	//判断是否支持标准浏览器的js解译<br />
{<br />
xmlHttp = new XMLHttpRequest();	//实例化函数<br />
}<br />
}<br />
function fun()	//建立fun函数<br />
{<br />
s_xmlhttprequest();	//引入实例化函数<br />
var user=document.myform.user.value;//读取myform表单中user里面的value值<br />
xmlHttp.open(&quot;GET&quot;,&quot;file/s050_2.php?con=&quot;+user,true);	//打开ajax<br />
xmlHttp.onreadystatechange= byphp;<br />
xmlHttp.send(null); <br />
}<br />
function byphp()<br />
{<br />
if (xmlHttp.readyState==1)//如果页面状态是1<br />
{<br />
document.getElementById('id').innerHTML = 'loading...';//输出下面的字符<br />
}<br />
else if(xmlHttp.readyState==4)//如果状态为4了<br />
{<br />
if(xmlHttp.status==200)//如果服务器状态为完成<br />
{<br />
var byphp = xmlHttp.responseText;<br />
document.getElementById('id').innerHTML = byphp;<br />
}<br />
<br />
}<br />
}<br />
</div>
我们建立一个s050_2.php在里面写入这样的代码
<div class="code">
  <p>&lt;?php<br />
    include('../include/conn.php');<br />
    sleep(1);</p>
  <p>if(isset($_GET['con']))<br />
    {<br />
    $sql=&quot;select * from `test` where uid='$_GET[con]'&quot;;<br />
    $arr=mysql_query($sql);<br />
    if(is_array(mysql_fetch_array($arr)))<br />
    {<br />
    echo '&lt;font color=red&gt;该用户名已经存在&lt;/font&gt;'.$_GET['con'];<br />
    }<br />
    else<br />
    {<br />
    echo'&lt;font color=green&gt;该用户名可以使用&lt;/font&gt;'.$_GET['con']; <br />
    }<br />
    }<br />
    ?&gt;</p>
</div>
我们在本页面内加入这样的代码<br />
<div class="code">&lt;script type=&quot;text/javascript&quot; src=&quot;file/s050_1.js&quot;&gt;&lt;/script&gt;<br />
  &lt;form name=&quot;myform&quot; action=&quot;&quot;&gt;<br />
  输入姓名：&lt;input name=&quot;user&quot; onblur=&quot;fun();&quot;&gt;&lt;br /&gt;<br />
  &lt;span id=&quot;id&quot;&gt;&lt;/span&gt;<br />
  &lt;/form&gt;</div>
  我们来测试这段代码
<div class="effect">
<script type="text/javascript" src="file/s050_1.js"></script>
<form name="myform" action="">
输入姓名：<input name="user" onblur="fun();"><br />
<span id="id"></span>
</form>
</div>
</div>



</body>
</html>
